<script lang="ts" setup>
import {ref, watch,Transition, onMounted} from 'vue'
import enUS from 'ant-design-vue/es/locale/en_US';
import zhCN from 'ant-design-vue/es/locale/zh_CN';
import dayjs from 'dayjs';
import 'dayjs/locale/zh-cn';
import {useI18n} from 'vue-i18n'
import {useStore} from "@/store";
import { Locale } from 'ant-design-vue/es/locale-provider';

const store = useStore()
if (localStorage.getItem("account") === "true") {
  store.dispatch("connect")
}

const {locale} = useI18n();
locale.value = localStorage.getItem("locale") || locale.value
const componentLocale = ref<string|Locale>(enUS)
if(locale.value=='zh_CN'){
  componentLocale.value = zhCN;
}else{
  componentLocale.value = enUS;
}
watch(componentLocale, (val:any) => {
  dayjs.locale(val);
});
console.log("MODE:",process.env.NODE_ENV)
</script>

<template>
  <a-config-provider :locale="componentLocale">
    <router-view v-slot="{ Component }">
        <transition name="fade" mode="out-in" :duration="300"
            enter-active-class="animate__animated animate__fadeIn"
            leave-active-class="animate__animated animate__fadeOut">
          <KeepAlive :max="10">
            <component :is="Component" />
          </KeepAlive>
        </transition>
    </router-view>
  </a-config-provider>
</template>

<style>
#app {
  text-align: center;
}
</style>
